<template>
  <el-container>
    <el-container>
      <el-header>
        <el-row :gutter="15">
          <el-col :span="3">
            <el-input placeholder="请输入定时器名称" size="medium" prefix-icon="el-icon-search" v-model="schedulerName"></el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="success" size="small" icon="el-icon-search" @click="queryData">查询</el-button>
            <el-button type="warning" size="small" icon="el-icon-refresh" @click="clearCondition">重置</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="openForm('save')">新增</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-table :data="orderData" style="width: 100%" height="100%" border :cell-style="{'text-align': 'center'}" :header-cell-style="{'text-align': 'center'}">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="定时器名称">
                  <span>{{ props.row.f_name }}</span>
                </el-form-item>
                <el-form-item label="定时器描述">
                  <span>{{ props.row.f_description }}</span>
                </el-form-item>
                <el-form-item>
                  <el-button type="success" size="small" icon="el-icon-edit" @click="openForm(props.row)">修改</el-button>
                  <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteScheduler(props.row)">删除</el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="编号"  width="300"></el-table-column>
          <el-table-column prop="f_name" label="名称"></el-table-column>
          <el-table-column prop="f_description" label="描述"></el-table-column>
          <el-table-column prop="f_expression" label="表达式"></el-table-column>
          <el-table-column prop="f_execution_type" label="业务类型"></el-table-column>
          <el-table-column prop="f_sql_name" label="SQL名称"></el-table-column>
          <el-table-column prop="f_logic_name" label="LOGIC名称"></el-table-column>
          <el-table-column prop="f_data" label="参数"></el-table-column>
          <el-table-column fixed="right" label="定时器状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.f_enable" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="enableScheduler(scope.row)"></el-switch>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <el-dialog :title="dialogTitle" :visible.sync="dialogShow" append-to-body>
      <el-form :model="dialogData" label-width="100px">
        <el-form-item label="定时器名称">
          <el-input v-model="dialogData.f_name"></el-input>
        </el-form-item>
        <el-form-item label="定时器描述">
          <el-input v-model="dialogData.f_description"></el-input>
        </el-form-item>
        <el-form-item label="定时器状态">
          <el-input v-model="dialogData.f_enable"></el-input>
        </el-form-item>
        <el-form-item label="表达式">
          <el-input v-model="dialogData.f_expression"></el-input>
        </el-form-item>
        <el-form-item label="业务类型">
          <el-input v-model="dialogData.f_execution_type"></el-input>
        </el-form-item>
        <el-form-item label="SQL名称">
          <el-input v-model="dialogData.f_sql_name"></el-input>
        </el-form-item>
        <el-form-item label="LOGIC名称">
          <el-input v-model="dialogData.f_logic_name"></el-input>
        </el-form-item>
        <el-form-item label="执行参数">
          <el-input v-model="dialogData.f_data"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="operateScheduler">保 存</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  name: 'Scheduler',
  methods: {
    // 查询用户数据
    queryData () {
      // 组织查询条件
      let condition = '1 = 1'
      if (this.schedulerName !== '') {
        condition += 'and f_name like \'%' + this.schedulerName + '%\''
      }
      let that = this
      // 查询
      this.axios.post('/sql/getScheduler', {'data': {'condition': condition}})
        .then(function (response) {
          that.orderData = response.data
        }).catch(function (error) {
          that.$message.error('数据加载失败!错误码:PAY10086' + error)
        })
    },
    // 重置搜索条件
    clearCondition () {
      this.orderId = ''
      this.billState = ''
    },
    // 打开弹出框
    openForm (row) {
      if (row === 'save') {
        this.dialogTitle = '新增'
      } else {
        this.dialogTitle = '修改'
        this.dialogData = JSON.parse(JSON.stringify(row))
      }
      this.dialogShow = true
    },
    // 新增/修改定时器
    operateScheduler () {
      let that = this
      this.axios.post('/entity/t_scheduler', this.dialogData)
        .then(function () {
          that.dialogData = {}
          that.dialogShow = false
          that.$message({
            message: that.dialogTitle + '成功！',
            type: 'success'
          })
          // 刷新表单
          that.queryData()
        }).catch(function (error) {
          that.$message.error(that.dialogTitle + '错误, 错误码:' + error)
        })
    },
    // 删除定时器
    deleteScheduler (row) {
      this.$confirm('此操作将永久删除定时任务' + row.f_name + ',是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认删除
        let that = this
        this.axios.delete('/entity/t_scheduler/' + row.id)
          .then(function () {
            that.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 刷新表单
            that.queryData()
          }).catch(function (error) {
            that.$message.error(that.dialogTitle + '错误, 错误码:' + error)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    enableScheduler (index) {
      console.log({index})
    }
  },
  data () {
    return {
      // 表格数据
      orderData: [],
      // 查询条件
      schedulerName: '',
      // 显示弹出框（定时器新增，修改）
      dialogShow: false,
      // 弹出框标题
      dialogTitle: '',
      dialogData: {},
      value: false
    }
  },
  mounted () {
    this.queryData()
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 40px;
  line-height: 30px;
  text-align: center;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
